$(function () {
  //计算视频的高度
  var videoHeight = $(".player").height() - $(".controls").height();
  var bodyWidth = window.innerWidth;
  console.log(bodyWidth);
  $("video").css("height", videoHeight + "px");
  $(".videoBody").css("minWidth", bodyWidth + "px");
  console.log($("body").css("minWidth"));
  //返回上一级
  $(".videoBack .clickback").click(function () {
    window.history.back(1);
  });

  //获取视频对象 H5写法
  var myVideo = document.querySelector("#myVideo");

  //播放或暂停
  document.querySelector(".switch").addEventListener("click", function () {
    //判断当前视频是否暂停
    if (myVideo.paused) {
      $(".zanting").css("display", "none");
      myVideo.play(); //播放
      $(".bofang").css("display", "block");
    } else {
      $(".zanting").css("display", "block");
      $(".bofang").css("display", "none");

      myVideo.pause(); //暂停
    }
  });

  //更改视频的速度
  var select = document.getElementById("select");
  // 改变播放速率
  select.addEventListener("change", function () {
    myVideo.playbackRate = this.value;
  });

  //全屏
  function goFullScreen() {
    element = document.getElementById("myVideo");
    if (element.requestFullscreen) {
      //w3c
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      //moz Firefox
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      //IE
      element.msRequestFullscreen();
    } else if (element.oRequestFullscreen) {
      //Opera
      element.oRequestFullscreen();
    } else if (element.webkitRequestFullscreen) {
      //webkit内核 Chrome Safari
      element.webkitRequestFullScreen();
    } else {
      var docHtml = document.documentElement;
      var docBody = document.body;
      var cssText = "width:100%;height:100%;overflow:hidden;";
      docHtml.style.cssText = cssText;
      docBody.style.cssText = cssText;
      element.style.cssText = cssText + ";" + "margin:0px;padding:0px;";
      document.IsFullScreen = true;
    }
  }
  //退出全屏
  function exitFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.oCancelFullScreen) {
      document.oCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else {
      var docHtml = document.documentElement;
      var docBody = document.body;
      var videobox = document.getElementById("videobox");
      docHtml.style.cssText = "";
      docBody.style.cssText = "";
      videobox.style.cssText = "";
      document.IsFullScreen = false;
    }
  }
  //判断是否全屏
  function isFullScreen() {
    return (
      document.fullscreen ||
      document.msFullscreenElement ||
      document.msFullscreenElement ||
      document.mozFullScreen ||
      document.oFullScreen ||
      document.webkitIsFullScreen
    );
  }

  //全屏和退出全屏
  $(".expend").on("click", function () {
    //切换样式
    $(".expend").toggleClass("fa-expand fa-compress");
    if (isFullScreen()) {
      exitFullscreen();
    } else {
      goFullScreen();
    }
  });

  //拖动进度时
  $(".bar").on("click", function (e) {
    var time = myVideo.duration * (e.offsetX / $(".bar").width());
    myVideo.currentTime = time;
  });

  //更新播放进度
  myVideo.addEventListener("timeupdate", function () {
    //更新进度条
    var pValue = (myVideo.currentTime / myVideo.duration) * 100;
    $(".line").css("width", pValue + "%");
    //显示当前播放进度的时间
    document.querySelector(".current").innerText = getTimeBySecond(
      myVideo.currentTime
    );
  });

  //播放结束时
  myVideo.addEventListener("ended", function () {
    //播放按钮类样式进行还原
    $(".switch").removeClass("fa-pause").addClass("fa-play");
    $(".line").css("width", 0);
    //设置当前播放时间
    myVideo.currentTime = 0;
    //视频播放状态为设置为停止
    myVideo.pause();
  });

  //当视频元数据加载时运行
  myVideo.addEventListener("loadedmetadata", function () {
    //设置总时长
    document.querySelector(".totalTime").innerText = getTimeBySecond(
      myVideo.duration
    );
  });

  //讲当前秒数转换为时间
  function getTimeBySecond(second) {
    var hour = parseInt(second / (60 * 60));
    var minute = parseInt((second / 60) % 60);
    var second = parseInt(second % 60);
    return (
      (hour < 10 ? "0" + hour : hour) +
      ":" +
      (minute < 10 ? "0" + minute : minute) +
      ":" +
      (second < 10 ? "0" + second : second)
    );
  }
});
